<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fun ;)</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css"
	href="${URL}css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${URL}css/styles.css">

<!-- JS -->
<script src="${URL}js/jquery-1.11.1.min.js"></script>
<script src="${URL}js/bootstrap.min.js"></script>
<script src="${URL}js/script.js"></script>
</head>
<body>
	<header>
		<h1>;) Eat</h1>
	</header>
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<div class="lstAnimal">
					<p class="title">
						<strong>List Animal </strong>
					</p>
					<table class="table table-hover" id="lstAnimal">
						<thead>
							<tr>
								<th>#</th>
								<th>Animal Name</th>
								<th>State</th>
							</tr>
						</thead>
						<tbody>
							<tr class="rowAnimal" id="rowAnimal">
								<td>1</td>
								<td>Dog</td>
								<td>0</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="col-md-6">
				<div class="lstFood">
					<p class="title">
						<strong>List Food</strong>
					</p>
					<table class="table table-hover" id="lstFood">
						<thead>
							<tr>
								<th>#</th>
								<th>Food Name</th>
								<th>Food Type</th>
							</tr>
						</thead>
						<tbody>
							<tr class="rowFood" id="rowFood">
								<td>1</td>
								<td>Beef</td>
								<td>Meat</td>
							</tr>
							<tr class="rowFood" id="rowFood">
								<td>1</td>
								<td>Beef</td>
								<td>Meat</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 col-md-offset-3">
				<input type="hidden" name="idFood" id="idFood" class="idFood" value="-1"/>
				<input type="hidden" name="idAnimal" id="idAnimal" class="idAnimal" value="-1"/>
				<button class="btn btn-lg btn-primary btn-block" id="btnEat">Eat</button>
			</div>
		</div>
	</div>
</body>
</html>